<template>
	<div :class="'bg-white p-2'">
		<Row class="p-1">
			<Col class="p-1" span="4" :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :xxl="3">
			<Input :class="'w-100'" v-model="searchKey.clientName" placeholder="请输入客户名" clearable />
			</Col>
			<Col class="p-1" span="4" :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :xxl="3">
			<Select :class="'w-100'" v-model="searchKey.storeId" placeholder="请选择门店" clearable>
				<Option v-for="(item, index) in stores" :value="item.storeId" :key="index">{{ item.name }}</Option>
			</Select>
			</Col>
			<Col class="p-1" span="4" :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :xxl="3">
			<Select :class="'w-100'" v-model="searchKey.statu" placeholder="请选择申请状态" clearable>
				<Option v-for="(item, index) in status" :value="item.value" :key="index">{{ item.label }}</Option>
			</Select>
			</Col>

			<Col :xs="24" class="p-1">
			<Button class="float-right" type="primary" shape="circle" @click="search" icon="ios-search">查询</Button>
			</Col>

		</Row>
		<div class="mt-1 d-xl-none">
			<Row class="bg-white border-top border-dark">
				<Col v-for="(row, index) in tableInfo.data" :xs="24" :sm="12" :md="8" :lg="8" :xl="6" :xxl="6"
					class="p-1 mt-2">
				<div class="shadow p-3 radius text-xs text-secondary">
					<div class="p-1 d-flex justify-content-between">
						<span>退押申请编号</span>
						<span>{{row.backId}}</span>
					</div>
					<div class="p-1 d-flex justify-content-between">
						<span>客户名</span>
						<span>{{row.clientName}}</span>
					</div>
					<div class="p-1 d-flex justify-content-between">
						<span>金额</span>
						<span>{{row.amount}}</span>
					</div>
					<div class="p-1 d-flex justify-content-between">
						<span>门店</span>
						<span>{{row.name}}</span>
					</div>
					<div class="p-1 d-flex justify-content-between">
						<span>申请状态</span>
						<span>{{row.statu}}</span>
					</div>
					<div class="p-1 d-flex justify-content-end text-sm">
						<Button class="mr-2" size="small" @click="show(row.backId)" type="primary">详细</Button>
						<Button class="mr-2" v-if="row.statu==='已申请'" size="small" @click="back(row.backId)"
							type="primary">同意</Button>
						<Button class="mr-2" v-if="row.statu==='已申请'" size="small" @click="reject(row.backId)"
							type="error">驳回</Button>
						<!-- <Button class="mr-2" size="small" @click="finish(row.backId)" type="success">手动退款完成</Button> -->
			
					</div>
				</div>
				</Col>
			</Row>
		</div>
		<div class="mt-1 d-none d-xl-block">
			<Table border :class="'m-1'" :columns="tableInfo.columnInfo" :data="tableInfo.data">
				<template slot-scope="{ row, index }" slot="amount">
					<span class="text-danger">￥{{util.parseMoney(row.amount / 100, 2)}}</span>
				</template>
				<template slot-scope="{ row, index }" slot="action">
					<Button class="mr-2" size="small" @click="show(row.backId)" type="primary" >详细</Button>
					<Button class="mr-2" v-if="row.statu==='REQ'" size="small" @click="back(row.backId)" type="primary">同意</Button>
					<Button class="mr-2" v-if="row.statu==='REQ'" size="small" @click="reject(row.backId)" type="error">驳回</Button>
					<!-- <Button class="mr-2" @click="finish(row.backId)" type="success">手动退款完成</Button> -->
				</template>
			</Table>
		</div>
		<div>
			<Page :class="'m-2 text-right'" :page-size="tableInfo.pageSize" @on-change="pageSearch"
				:total="tableInfo.total" />
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				searchKey: {
					clientName: "",
					storeId: "",
					statu: "",
				},
				stores: [],
				status: [{
						value: 'CRT',
						label: '未充值'
					},
					{
						value: 'PAY',
						label: '已充值'
					},
					{
						value: 'REQ',
						label: '已申请'
					},
					{
						value: 'REJ',
						label: '已驳回'
					},
					{
						value: 'CLO',
						label: '已关闭'
					},
					{
						value: 'RUN',
						label: '退款中'
					},
					{
						value: 'EXC',
						label: '退款异常'
					},
					{
						value: 'BCK',
						label: '已退还'
					},
				],
				tableInfo: {
					currentPage: 1,
					total: 0,
					pageSize: 10,
					columnInfo: [{
							title: "退押申请编号",
							key: "backId",
							width: 150
						},
						{
							title: "客户名",
							key: "clientName",
							width: 130
						},
						{
							title: "客户电话",
							key: "phone",
							width: 130
						},
						{
							title: "支付单号",
							key: "originalCode",
						},
						{
							title: "金额",
							slot: "amount",
							width: 100
						},
						{
							title: "门店",
							key: "name",
						},
						{
							title: "申请状态",
							key: "statu",
							render(h, params) {
								let flag;
								if (params.row.statu == 'REQ') {
									flag = "已申请";
								} else if (params.row.statu == 'REJ') {
									flag = "已驳回";
								} else if (params.row.statu == 'BCK') {
									flag = "已退还";
								} else if (params.row.statu == 'CLO') {
									flag = "已关闭";
								} else if (params.row.statu == 'RUN') {
									flag = "退款中";
								} else if (params.row.statu == 'EXC') {
									flag = "退款异常";
								}
								return h('span', flag)
							},
							width: 110
						},
						{
							title: "操作",
							slot: 'action',
						}
					],
					data: []
				}

			};
		},
		methods: {
			reject: function(backId) {
				this.http.put({
					url: "/client/deposit-back-request/" + backId + "/reject",
					param: {
						reason: "驳回申请"
					}
				}).then(data => {
					this.message.info("操作成功");
					this.loadData();
				});
			},
			finish: function(backId) {
				this.http.put({
					url: "/client/deposit-back-request/" + backId + "/finish",
				}).then(data => {
					this.message.info("操作成功");
					this.loadData();
				});
			},
			back: function(backId) {
				this.http.put({
					url: "/client/deposit-back-request/" + backId + "/back",
				}).then(() => {
					this.message.info("操作成功");
					this.loadData();
				});
			},
			search: function() {
				this.tableInfo.currentPage = 1;
				this.loadData();
			},
			findStore: function() {
				return this.http.get({
					url: "/store/store/info",
				}).then(data => {
					this.stores = data
				});
			},
			show: function(backId) {
				this.$router.push({
					path: '/depositBackRequest/detail?backId=' + backId
				});
			},
			loadData: function() {
				this.http.get({
					url: "/client/deposit-back-request/page",
					param: {
						currentPage: this.tableInfo.currentPage,
						pageSize: this.tableInfo.pageSize,
						clientName: this.searchKey.clientName,
						statu: this.searchKey.statu,
						storeId: this.searchKey.storeId,
					}
				}).then(data => {
					this.tableInfo.currentPage = data.current;
					this.tableInfo.total = data.total;
					this.tableInfo.pageSize = data.size;
					this.tableInfo.data = data.records;
					// for (var i = 0; i < this.tableInfo.data.length; i++) {
					// 	if (this.tableInfo.data[i].statu == 'REQ') {
					// 		this.tableInfo.data[i].statu = "已申请";
					// 	} else if (this.tableInfo.data[i].statu == 'REJ') {
					// 		this.tableInfo.data[i].statu = "已驳回";
					// 	} else if (this.tableInfo.data[i].statu == 'BCK') {
					// 		this.tableInfo.data[i].statu = "已退还";
					// 	} else if (this.tableInfo.data[i].statu == 'CLO') {
					// 		this.tableInfo.data[i].statu = "已关闭";
					// 	} else if (this.tableInfo.data[i].statu == 'RUN') {
					// 		this.tableInfo.data[i].statu = "退款中";
					// 	} else {
					// 		this.tableInfo.data[i].statu = "退款异常";
					// 	}


					// }

				});
			},
			pageSearch: function(changedPage) {
				this.tableInfo.currentPage = changedPage;
				this.loadData();
			},
		},
		created: function() {
			this.findStore().then(() => {
				this.search();
			});
		},
	}
</script>

<style>
</style>